The My Doctor Online App (formerly KP Preventive Care) aims to connect patients with their doctors anytime, anywhere. I was one of the main visual designers while working on this app. Since the app was on both iOS and Android, a lot of my design was driven by iOS’s Human Interface Guidelines as well as Google’s Material Design. Below are two features of the app I played a part in making a reality.
Find a Facility
The Find a Facility feature of My Doctor Online helped patients find Kaiser Permanente hospitals and medical offices where they could get the treatment they needed. One of the requirements included being able to see both a map and list view of the facilities. Another requirement was to provide directions to the facility and see which departments were available at the specific location. We already had this specific feature in the app so this was an opportunity for a visual refresh as well as enhancements to the overall experience.
Researching for enhancement opportunities
I started this redesign effort by delving into the research provided by our user research team. They had done some user testing with patients to see what the pain points they were experiencing with the current version. We learned the following.
- Patients were having issues with navigating the map view because we showed all the available facilities in Northern California. We learned that the majority of the patients simply wanted to find the facility that was closest to them.
- Getting the directions to the facility was often a chore because we only provided an address. The address was not linked to any sort of map application so users would have to copy the address and paste it into their map application.
- The overall look and feel of the feature hadn’t been updated since the days of skeuromorphism so it felt dated.
Having the information helped inform where our design could be improved. From here, I began to do further research into experiences of maps and list views in other apps, namely Google Maps, Yelp, and ZocDoc.
Redesigning for improvements
With the information provided by the user research team in hand, I began to redesign this feature. I started by making wireframes. I generally start with wireframes when introducing new designs so that they can get the proper approval needed.
For this project, I incorporated some changes to the default view of the map so that it utilized the location of the patient. This allowed us to display a much more compact and useful view radius on the map and let patients find the closest facility easier. I also advocated to include a link on all the facility address which would easily allow the patients to tap and go to their map application of choice to get directions. Finally, since this was also a visual update, I incorporated the current iOS Human Interface Guidelines as well as the Material Design guidelines for the Android version.
Testing and delivering
Once our designs were complete, we ran some user tests to get additional feedback on our designs. We had patients mention that it was easier to find locations near them and that it felt very modern. The also found the addition of the address links to be a very welcome addition.
We had an offshore development team for this feature. That meant that communication had to be very clear and often. I would attend morning (and occasionally night time) scrums to make sure I answered any questions the development team had and to clean up anything that wasn’t developed the way I intended in the design.
Appointment Reminders
An important aspect of managing your health is making sure you know the details of your upcoming appointments. Our doctors had been pushing for a feature like this on My Doctor Online (web) and it became a higher priority to implement on the app. I originally worked on the mobile web version of the Appointment Reminders and was called upon to work on the app version of it as well. The biggest challenges of this design was to maintain consistency between the mobile web version and designing something that had a similar look and feel while also incorporating iOS Human Interface/Material Design guidelines.
Implementing iOS Human Interface Guidelines and Material Design
The requirements of the design were fairly simple. There were little deviations from the mobile web version of the Appointment Reminders. The challenge was making sure the patterns we had established on the mobile web had a corresponding pattern or style we could adopt from Material Design and the iOS Human Interface guidelines. In scenarios it did not, we would make adjustments to our pattern to better fit into the guidelines.